<template>
    <div class="manage" style="height: 90% ;padding-bottom: 20px;overflow: hidden">



        <!--dialog弹出框-->
        <el-dialog :title="operateType ==='add' ? '新增用户':'更新用户'" :visible.sync="isShow">
            <common-form :formLabel="operateFormLabel" :form="operateForm"></common-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <div class="manage-header" style="display: flex;justify-content: space-between;align-items: flex-start">
            <el-button type="primary" v-on:click="addUser">+新增</el-button>
                <common-form  inline :formLabel="formLabel"  :form="searchFrom">
                <el-button type="primary">搜索</el-button>
            </common-form>
        </div>

        <common-table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changPage="getList" @edit="editUser" @del="delUser"></common-table>
        <!--分页栏-->
        <el-pagination
                small
                layout="prev, pager, next"
                :total="50"
                @next-click="getnext"
                @prev-click="changepre"
               >
        </el-pagination>
    </div>
</template>


<script>
    import  CommonForm from '../../components/CommonForm'
    import  CommonTable from '../../components/CommonTable'
    export default {
        name: "UserManage",
        components:{
            CommonTable,
            CommonForm
        },
props:{
  userId:String
},
        data(){
            return{

                isShow:false,
                operateType:'add',
                formLabel:[
                    {   model : 'keyword',
                        label:'',
                        optios:[]
                    }
                ],
                searchFrom: {
                    keyword: "",
                },
                //用来存表格数据
                tableData:[],
                //表格的头
                tableLabel:[
                    {
                        prop:'name',
                        label:'姓名'
                    },
                    {
                        prop:'email',
                        label:'电子邮箱'
                    },
                    {
                        prop:'phone',
                        label:'电话',
                    },

                    {
                        prop:'nicheng',
                        label:'昵称',
                        width:320
                    }


                ],
                addConfim:{
                    flag:false
                },
                //配置信息，有关页面，是否需要加载，以及总共的数据条数
                config: {
                    page:0,
                    total:30,
                    loading:false
                },

                operateForm:{
                    real_name:'',
                    email:'',
                    phone:'',
                    login_name:'',
                    objectId:''

                },
                //当操作表的时候传入的值
                operateFormLabel:[
                    {
                        model:'real_name',
                        label:'姓名',
                    },
                    {
                        model:'email',
                        label:'电子邮箱',
                    },

                    {
                        model:'phone',
                        label:'电话',

                    },
                    {
                        model:'login_name',
                        label:'昵称',
                    },
                ]
            }
        },
        methods:{

            getnext(){
                if(this.config.page>5){
                    this.config.page=0
                }
                this.config.page+=3
                this.getList();
                console.log("下一页")
            },
            changepre(){
                this.config.page-=3
                this.config.page+=1
                this.getList();
                console.log("上一页")
            },
            //获取表单数据
            getListdata() {

                const query = Bmob.Query("account");

                query.find()
                    .then(res => {
                        this.tableData = res
                        this.config.total = res.length
                        this.config.loading = false
                        console.log(res[0])
                    });
            },
            getList(){

                const query = Bmob.Query("account");
                query.limit(3)
              query.skip(this.config.page)

                query.find()
                    .then(res => {
                    this.tableData = res
                    this.config.total = res.length
                    this.config.loading = false
                    console.log(res[0])
                });

            },
            //添加用户信息
            addUser(){
                this.operateType="add"
                 this.isShow=true
                this.addConfim.flag=true


            },
            // 编辑的方法
            editUser(row){
                this.addConfim.flag=false
                this.operateType=""
                this.addConfim.flag=false
                this.isShow=true
                this.operateForm = row
                console.log(row.objectId)

            },
            //删除表单元素
            delUser(row){

                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    const query = Bmob.Query('account');
                    query.destroy(row.objectId).then(res => {
                        console.log(res)
                        this.$message({
                            type: 'info',
                            message: '删除成功'
                        });
                    }).catch(err => {
                        console.log(err)
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    })
 //进行重新加载
                    this.getListdata()


                });
            },
           // dialog点击确定提交表单操作
            confirm(){
                // 如果为真执行添加操作
                if(this.addConfim.flag){
                    console.log("添加"+this.addConfim.flag)
                const query = Bmob.Query('account');
                query.set("real_name",this.operateForm.real_name)
                query.set("email",this.operateForm.email)
                query.set("phone",this.operateForm.phone)
                query.set("login_name",this.operateForm.login_name)
                query.save().then(res => {
                    //如果添加成功就刷新界面
                    // this.getList();
                    this.getListdata()
                }).catch(err => {
                    console.log(err)
                })

            }
                //修改方法
                else{
                    console.log("修改"+this.addConfim.flag)
                    const query = Bmob.Query('account');
                    query.get(this.operateForm.objectId).then(res => {
                        console.log(res)
                        res.set('real_name',this.operateForm.real_name)
                        res.set('login_name',this.operateForm.login_name)
                        res.set('phone',this.operateForm.phone)
                        res.set('email',this.operateForm.email)
                        res.save()
                        this.getList();
                    }).catch(err => {
                        console.log(err)
                    })
                }
                this.isShow= false

            }
        },
        //搜索

        created() {
            this.getListdata()
            // this.$route.params
// console.log(this.$route.params.name)
        },


    }
</script>

<style scoped>

</style>